<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" /> -->
	<title>动画案例</title>
	<style type="text/css">
	  * {
        padding: 0;
        margin: 0;
      }
      body {
        width: 100vh;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #34495e;
      }
      div {
        font-size: 4em;
        font-weight: bold;
        text-transform: uppercase;
        color: #9b59b6;
      }
      div > span {
        position: relative;
        display: inline-block;
      }
      .color {
        animation-name: color;
        animation-duration: 1s;
        animation-iteration-count: 2;
        animation-timing-function: linear;
        animation-direction: alternate;
      }
      @keyframes color {
        50% {
          color: #f1c40f;
          transform: scale(2);
        }
        to {
          color: #e74c3c;
          transform: scale(0.5);
        }
      }
    </style>
</head>
<body>
	<div id="box">houdunren.com</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	let div = document.querySelector("#box");
	
	/*
	console.log([... div.textContent])
	;[... div.textContent].reduce((pre, cur, index)=> {
		index === 0 && (div.innerHTML = '', console.log('start'))
		let span = document.createElement('span')
		span.textContent = cur
 		div.appendChild(span);

		span.addEventListener('mouseover', () => {
			span.classList.add('changeColor')
		})
		span.addEventListener('animationend', function() {
			this.classList.remove('changeColor')
		})
	}, 0)

	*/

	;[...div.textContent].forEach((item, index)=> {
		index === 0 && (div.innerHTML = '')
		let span = document.createElement('span')
		span.textContent = item;
		div.appendChild(span)

		span.addEventListener('mouseover', function() {
			this.classList.add('changeColor', 'color')
		})
		span.addEventListener('animationend', function(){
			this.classList.remove('changeColor', 'color')
		})
	})
	console.log(div.classList)
	console.log(div.classList.add('sdfsdf'))
	
	</script>
</body>
</html>